<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.name" placeholder="投票名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleCurrentChange(1)">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="items"
      highlight-current-row
      style="width: 100%"
      @selection-change="selsChange"
      @sort-change="sortChange"
    >
      <el-table-column type="index" width="60" />
      <el-table-column prop="ballotId" label="投票编号" sortable="custom" />
      <el-table-column prop="userName" label="投票人" sortable="custom" />
      <el-table-column prop="voteName" label="投票名" sortable="custom" />
      <el-table-column prop="optionName" label="投票选项" sortable="custom" />
      <el-table-column prop="description" label="投票理由" sortable="custom" />
      <el-table-column prop="ballotTime" label="投票时间" sortable="custom" />
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :current-page.sync="page"
        :page-size="10"
        :total="total"
        style="float: right"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </section>
</template>

<script>
import Tool from '@/utils/tool'

export default {
  data() {
    return {
      Tool,
      pageController: 'ballot',
      filters: {
        address: '',
        name: ''
      },
      menus: {
      },
      items: [],
      total: 0,
      page: 1,
      order: '',
      sortby: '',
      listLoading: false,
      sels: [], // 列表选中列

      dbFormVisible: false, // 编辑界面是否显示
      dbMethod: '', // 是更新还是新增操作
      dbLoading: false
    }
  },
  mounted() {
    this.getList()
    this.getMenus()
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 获取用户列表
    getList() {
      const vue = this
      Tool.getList(vue, { voteName: vue.filters.name })
    },
    getMenus() {
      const vue = this
      Tool.getMenus(vue)
    },
    selsChange: function(sels) {
      this.sels = sels
    },
    sortChange(column) {
      const vue = this
      Tool.sortChange(vue, column)
    }
  }
}
</script>

<style scoped>
.table-button {
  margin: 2px 0px;
}
span.label {
  margin: 5px;
}
</style>
